import React, { useEffect, useCallback, useState } from "react";
import { Input, Modal, Icon } from "antd";
// import { openNotificationWithIcon } from '@/utils/comm';
import { isIdDuplicated } from '@/utils/formilyAppHelperUtil';
import _debounce from 'lodash/debounce';
import { codePattern, codePatternErrMsg } from '@/pages/flowmanage/formbuilder';
import styles from './CodeSetter.less';

const formEditorStyle = (/* label, */ children) => (
  <div style={{ marginBottom: 24 }}>
    {/* <div style={{marginBottom: 4}}>
      { label || ''}
    </div> */}
    {children}
  </div>
);

const CodeSetter = props => {
  const { appHelper, form, editable = true, value, onChange, inputProps } = props;
  const id = value;
  const [errorMsg,  setErrorMsg] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [inputValue, setInputValue] = useState(false);

  useEffect(() => {
    setInputValue(value);
  }, [value]);
  
  useEffect(() => {
    const _id = form.getFieldValue("_id");
    if (!_id) {
      onChange(appHelper.activeKey )
    } 
  }, []);

  const checkDuplicte = useCallback(
    _debounce(
      (_id) => {
        // console.log('debounce');
        if (!_id) {
          setErrorMsg(`请输入表单编码`)
        } else if (isIdDuplicated(appHelper, _id)) {
          // openNotificationWithIcon(
          //   "error",
          //   "",
          //   `表单编码"${_id}重复了"`,
          // );
          setErrorMsg(`表单编码"${_id}"已存在`)
        } else if (!codePattern.test(_id)) {
          setErrorMsg(codePatternErrMsg);
        } else {
          setErrorMsg('');
        }
      },
      500
  ), [appHelper]);

  const onInputChange = useCallback((e) => {
    const _id = e.target.value;
    checkDuplicte(_id);
    setInputValue(_id);
  }, [checkDuplicte])

  return formEditorStyle(
    /* props.label, */
    <div className={styles.root}>
      <div style={{marginBottom: 4}}>表单编码</div>
      <div className={styles.container}>
        <span>{id}</span>
        { editable && form.getFieldValue('enableAsFlowVariable') ? (
          <Icon 
            type="edit" 
            title="编辑表单编码"
            onClick={() => {
              setInputValue(value);
              setErrorMsg('');
              setModalVisible(true);
            }} 
          />
        ): null }
      </div>
      <Modal
        width={388}
        title="编辑表单编码"
        visible={modalVisible}
        onOk={() => {
          if (isIdDuplicated(appHelper, inputValue)) {
            setErrorMsg(`表单编码"${inputValue}"已存在`)
          } else if (!codePattern.test(inputValue)) {
            setErrorMsg(codePatternErrMsg);
          } else {
            onChange(inputValue);
            setModalVisible(false);
          }
        }}
        onCancel={() => setModalVisible(false)}
        okButtonProps={{
          disabled: !!errorMsg,
        }}
      >
        <div className={errorMsg ? 'ant-form-item-has-error' : ''}>
          <Input value={inputValue} onChange={onInputChange} {...inputProps} />
          { errorMsg ? (
            <div className="ant-form-item-explain ant-form-item-explain-error">
              <div role="alert">{errorMsg}</div>
            </div>
          ) : null }
        </div>
      </Modal>
    </div>
  );
};

export const CodeSetterName = "CodeFieldSetter";
export default CodeSetter;
